<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jitsi IFrame 视频会议 Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header {
            background-color: #202124;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        .container {
            flex: 1;
            padding: 1rem;
            overflow: hidden;
        }

        .setup-panel {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 500px;
            margin: 2rem auto;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
        }

        input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #0056b3;
        }

        button#leaveButton {
            background-color: #dc3545;
            margin-top: 1rem;
        }

        button#leaveButton:hover {
            background-color: #bb2d3b;
        }

        #meetingContainer {
            width: 100%;
            height: 100%;
            display: none;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        #jitsiFrame {
            width: 100%;
            height: 100%;
            border: none;
        }

        .controls {
            text-align: center;
            margin-top: 1rem;
            display: none;
        }

        .status {
            text-align: center;
            margin-top: 1rem;
            color: #666;
        }
    </style>
</head>
<body>
<header>
    <h1>Jitsi 视频会议 (IFrame 版)</h1>
</header>

<div class="container">
    <div class="setup-panel" id="setupPanel">
        <div class="form-group">
            <label for="roomName">会议房间名</label>
            <input type="text" id="roomName" placeholder="输入房间名称" value="my-meeting-123">
        </div>
        <div class="form-group">
            <label for="userName">你的名字</label>
            <input type="text" id="userName" placeholder="输入你的名字" value="参会者">
        </div>
        <button id="joinButton">加入会议</button>
    </div>

    <div id="meetingContainer">
        <iframe id="jitsiFrame" allow="camera; microphone; display-capture; fullscreen"></iframe>
    </div>

    <div class="controls" id="controls">
        <button id="muteAudio">静音</button>
        <button id="muteVideo">关闭摄像头</button>
        <button id="shareScreen">共享屏幕</button>
        <button id="leaveButton">离开会议</button>
    </div>

    <div class="status" id="status">请输入会议信息并加入</div>
</div>

<!-- 引入 Jitsi IFrame API -->
<script src="https://meet.jit.si/external_api.js"></script>

<script>
    // 全局变量
    let api = null;
    const domain = 'meet.jit.si'; // Jitsi 服务器域名

    // DOM 元素
    const setupPanel = document.getElementById('setupPanel');
    const meetingContainer = document.getElementById('meetingContainer');
    const controls = document.getElementById('controls');
    const statusElement = document.getElementById('status');
    const roomNameInput = document.getElementById('roomName');
    const userNameInput = document.getElementById('userName');
    const joinButton = document.getElementById('joinButton');
    const leaveButton = document.getElementById('leaveButton');
    const muteAudioButton = document.getElementById('muteAudio');
    const muteVideoButton = document.getElementById('muteVideo');
    const shareScreenButton = document.getElementById('shareScreen');
    const jitsiFrame = document.getElementById('jitsiFrame');

    // 加入会议
    function joinMeeting() {
        const roomName = roomNameInput.value.trim();
        const userName = userNameInput.value.trim();

        if (!roomName || !userName) {
            alert('请输入房间名和用户名');
            return;
        }

        // 配置会议选项
        const options = {
            roomName: roomName,
            width: '100%',
            height: '100%',
            parentNode: document.getElementById('jitsiFrame').parentNode,
            configOverwrite: {
                startWithAudioMuted: false,
                startWithVideoMuted: false,
                disableDeepLinking: true,
                prejoinPageEnabled: false // 禁用预加入页面
            },
            interfaceConfigOverwrite: {
                // 自定义界面配置
                DEFAULT_BACKGROUND: '#000',
                SHOW_JITSI_WATERMARK: false,
                SHOW_WATERMARK_FOR_GUESTS: false,
                MAIN_TOOLBAR_BUTTONS: [
                    'microphone', 'camera', 'screen', 'hangup',
                    'fullscreen', 'tileview', 'chat'
                ]
            },
            userInfo: {
                displayName: userName
            }
        };

        // 初始化 Jitsi 会议
        api = new JitsiMeetExternalAPI(domain, options);

        // 监听会议连接状态
        api.addEventListener('connectionEstablished', () => {
            updateStatus(`已连接到会议: ${roomName}`);
            setupPanel.style.display = 'none';
            meetingContainer.style.display = 'block';
            controls.style.display = 'block';
        });

        // 监听错误事件
        api.addEventListener('error', (error) => {
            console.error('会议错误:', error);
            updateStatus(`会议错误: ${error.message}`);
        });

        // 监听会议结束
        api.addEventListener('videoConferenceLeft', () => {
            updateStatus('已离开会议');
            cleanupMeeting();
        });
    }

    // 离开会议
    function leaveMeeting() {
        if (api) {
            api.dispose(); // 销毁会议实例
            cleanupMeeting();
        }
    }

    // 清理会议状态
    function cleanupMeeting() {
        api = null;
        meetingContainer.style.display = 'none';
        controls.style.display = 'none';
        setupPanel.style.display = 'block';
    }

    // 切换音频静音
    function toggleAudio() {
        if (!api) return;

        api.isAudioMuted().then((muted) => {
            if (muted) {
                api.unmuteAudio();
                muteAudioButton.textContent = '静音';
            } else {
                api.muteAudio();
                muteAudioButton.textContent = '取消静音';
            }
        });
    }

    // 切换视频
    function toggleVideo() {
        if (!api) return;

        api.isVideoMuted().then((muted) => {
            if (muted) {
                api.unmuteVideo();
                muteVideoButton.textContent = '关闭摄像头';
            } else {
                api.muteVideo();
                muteVideoButton.textContent = '开启摄像头';
            }
        });
    }

    // 切换屏幕共享
    function toggleScreenShare() {
        if (!api) return;

        api.isScreenSharingActive().then((active) => {
            if (active) {
                api.stopScreenSharing();
                shareScreenButton.textContent = '共享屏幕';
            } else {
                api.startScreenSharing();
                shareScreenButton.textContent = '停止共享';
            }
        });
    }

    // 更新状态信息
    function updateStatus(text) {
        statusElement.textContent = text;
    }

    // 绑定事件监听
    joinButton.addEventListener('click', joinMeeting);
    leaveButton.addEventListener('click', leaveMeeting);
    muteAudioButton.addEventListener('click', toggleAudio);
    muteVideoButton.addEventListener('click', toggleVideo);
    shareScreenButton.addEventListener('click', toggleScreenShare);

    // 页面关闭时清理
    window.addEventListener('beforeunload', () => {
        if (api) {
            api.dispose();
        }
    });
</script>
</body>
</html>